import { FireFilled, HomeFilled, YuqueFilled } from "@ant-design/icons";
import { CheckCard } from "@ant-design/pro-components";
import { Col, Collapse, Form, FormProps, Row } from "antd";
import { useEditorContext } from "../../store/editor-provider";
import { getThemeByJson } from "../../theme";
import ColorSelect from "../color-select";
import { ColorSeriesSelect, FontSizeSelect } from "./common-settings";

type Props = {};

const baseFormLayoutConfig: FormProps = {
  colon: false,
  labelCol: { span: 8 },
  size: "small",
  labelAlign: "left"
};

export default function GlobalSettingsPannel(props: Props) {
  const { editor, dispatch } = useEditorContext();
  const [form] = Form.useForm();

  /** 全局设置变化时 */
  const handleFormChange: FormProps["onValuesChange"] = (
    changedValues,
    allValues
  ) => {
    if (Object.hasOwn(changedValues, "theme") && changedValues["theme"]) {
      const theme = getThemeByJson(changedValues["theme"]);
      dispatch({
        "type": "UPDATE_GS",
        payload: theme
      });
      form.setFieldsValue(theme);
    } else {
      dispatch({ "type": "UPDATE_GS", payload: allValues });
      form.setFieldsValue(allValues);
    }
  };

  // console.log("editor.golbalSettings: ", editor.golbalSettings);

  return (
    <Form
      form={form}
      {...baseFormLayoutConfig}
      initialValues={editor.golbalSettings}
      onValuesChange={handleFormChange}
    >
      <div className='gs-pannel'>
        <Collapse
          size={"small"}
          defaultActiveKey={["theme", "title", "canvas"]}
        >
          <Collapse.Panel header={"主题"} key={"theme"}>
            <Form.Item name={"theme"} noStyle>
              <CheckCard.Group style={{ width: "100%" }}>
                <Row gutter={10}>
                  <Col span={8}>
                    <CheckCard
                      style={{ width: "100%" }}
                      title={
                        <>
                          <HomeFilled
                            style={{ color: "#1668dc", marginRight: 4 }}
                          />
                          默认
                        </>
                      }
                      value='默认'
                    />
                  </Col>
                  <Col span={8}>
                    <CheckCard
                      style={{ width: "100%" }}
                      title={
                        <>
                          <FireFilled
                            style={{ color: "#141414", marginRight: 4 }}
                          />
                          暗黑
                        </>
                      }
                      value='暗黑'
                    />
                  </Col>
                  <Col span={8}>
                    <CheckCard
                      style={{ width: "100%" }}
                      title={
                        <>
                          <YuqueFilled
                            style={{ color: "#2cc359", marginRight: 4 }}
                          />
                          语雀
                        </>
                      }
                      value='语雀'
                    />
                  </Col>
                </Row>
              </CheckCard.Group>
            </Form.Item>
            <Form.Item name={"colorSeries"} label={"色系"}>
              <ColorSeriesSelect />
            </Form.Item>
          </Collapse.Panel>
          <Collapse.Panel header={"画布配置"} key={"canvas"}>
            <Form.Item name={"canvasBgColor"} label={"背景颜色"}>
              <ColorSelect />
            </Form.Item>
          </Collapse.Panel>
          <Collapse.Panel header={"卡片配置"} key={"title"}>
            <Form.Item name={["cardStyle", "bgColor"]} label={"卡片背景"}>
              <ColorSelect />
            </Form.Item>
            <Form.Item label={"标题样式"}>
              <Form.Item name={["cardStyle", "titleSize"]} noStyle>
                <FontSizeSelect />
              </Form.Item>

              <Form.Item name={["cardStyle", "titleColor"]} noStyle>
                <ColorSelect />
              </Form.Item>

              <Form.Item name={["cardStyle", "titleBgColor"]} noStyle>
                <ColorSelect />
              </Form.Item>
            </Form.Item>
          </Collapse.Panel>
        </Collapse>
      </div>
    </Form>
  );
}

export { baseFormLayoutConfig };
